{% extends "__base__.html" %}

{% block title %}
    {{ pdf.title }} - {{ site.title }}
{% endblock %}

{% block script %}
<style>
    .pdf-hidden {
        display: none !important;
    }

    .pdf-only {
        display: revert !important;
    }

    .pdf-page {
        break-after: page;
    }

    .pdf-page-url {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .pdf-toc {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #gsi-content pre.hljs {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
    }

    pre.ascii {
        break-inside: avoid-page;
    }
</style>
{% include "__i18n__.html" %}
<script>
documentReady(function() {
    const pdfUri = '{{ __uri__ }}';
    const domain = '{{ site.domain }}';
    const lang = '{{ site.language }}';
    const pdfPath = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
    const updateImageSrc = function(relativeUri, pdfPage, selector, attr) {
        pdfPage.querySelectorAll(selector).forEach(function(el) {
            let src = el.getAttribute(attr);
            if (src && !src.startsWith('http://') && !src.startsWith('https://') && !src.startsWith('data:') && !src.startsWith('/')) {
                src = relativeUri + src;
                el.setAttribute(attr, src);
            }
        });
    };
    const updateAHref = function(relativeUri, pdfPage, selector) {
        pdfPage.querySelectorAll(selector).forEach(function(el) {
            let href = el.getAttribute('href');
            if (href && !href.startsWith('http://') && !href.startsWith('https://')) {
                if (href.startsWith('/')) {
                    href = domain + href;
                } else {
                    href = domain + pdfPath + relativeUri + href;

                }
                el.setAttribute('href', href);
            }
        });
    };

    document.querySelectorAll('img').forEach(function(img) {
        img.setAttribute('loading', 'eager');
    });

    document.querySelectorAll('div.pdf-page').forEach(function(pdfPage) {
        let baseUri = pdfPage.getAttribute('data-base-uri');
        if (baseUri && baseUri.startsWith(pdfUri)) {
            // pdfUri = /books/hello/
            // baseUri = /books/hello/chapter1/
            // relativeUri = chapter1/
            let relativeUri = baseUri.substring(pdfUri.length);
            updateImageSrc(relativeUri, pdfPage, 'img', 'src');
            updateImageSrc(relativeUri, pdfPage, 'image', 'href');
            updateAHref(relativeUri, pdfPage, 'a');
        }
    });

    document.querySelectorAll('[data-i18n]').forEach(function(el) {
        let s = el.innerText;
        let t = i18n(s, lang);
        if (s !== t) {
            el.innerText = t;
        }
    });
});
</script>
{% endblock %}

{% block main %}
<div id="pdf-content">
    <div id="gsi-content">
        <div id="pdf-toc" class="pdf-page">
            <a name="pdf-toc"></a>
            <h1 class="pdf-page-title" data-i18n>Index</h1>
        {% for t in pdf.toc %}
            <div class="pdf-toc pdf-toc-{{ t.level }}" style="margin-left:{{ t.level-1 }}rem;">{{ t.marker }} <a href="#{{ t.id }}">{{ t.title }}</a></div>
        {% endfor %}
        </div>
        {% for c in pdf.chapters %}
        <div id="div-{{ c.id }}" class="pdf-page" data-base-uri="{{ c.baseUrl }}">
            <h1 id="{{ c.id }}" class="pdf-page-title">{{ c.title }}</h1>
            <div class="pdf-page-url"><a href="{{ c.url }}" data-i18n>Original URL</a></div>
            {{ c.content | safe }}
            <div class="pdf-page-url"><a href="{{ c.url }}#comments" data-i18n>Comments</a></div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
